<template>
	<view>
		<view class="warp">
			<!-- <h4>我的计划</h4> -->
			<view class="item" v-for="(item,index) in listData" :key="index" v-if="listData.length > 0" @tap="goDetail(item)">
				<view class="left">
					<image :src="item.imgurl" mode="" class="logo"></image>
					<view class="">
						<h3>{{ item.title }}</h3>
						<p style="color: gainsboro;">积分：{{item.integral}}</p>
					</view>
				</view>
				<view class="right">
					<button type="warn" size="mini" @tap="remove(item)">删除</button>
				</view>
			</view>
			<view class="noplan" v-else>
				暂无计划
			</view>
		</view>
	</view>
</template>

<script>
	import { selectAllPlan, deletePlan } from "@/api/index.js"
	export default {
		data() {
			return {
				listData: []
			}
		},
		onLoad() {
			this.list()
		},
		methods: {
			async list(){
				let user = uni.getStorageSync("users");
				let res = await selectAllPlan({user});
				console.log(res,'res');
				if(res.data) {
					this.listData = res.data
				}
			},
			async remove(data) {
				console.log(data,'data');
				let res = await deletePlan({
					user: data.user,
					title: data.title
				})
				if(res.data.code === 1000) {
					this.list()
				}
			},
			goDetail(data){
				console.log(data);
				uni.navigateTo({
					url: "/pages/detail/detail?value=" + encodeURIComponent(JSON.stringify(data))
				})
			},
		}
	}
</script>

<style scoped>
page {
	background-color: aliceblue;
}
.warp {
	padding: 20rpx;
}
.item {
	padding: 20rpx;
	margin: 10rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.left {
	display: flex;
}
.logo {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}
</style>
